<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="80%">
    <el-form ref="formRef"
             :model="formModel"
             :rules="formRules"
             label-width="140px">
      <el-form-item label="专项主题名称："
                    prop="name">
        <el-input v-model="formModel.name"
                  placeholder="专项主题名称"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="关联病症："
                    prop="complicationInfo">
        <el-select v-model="disease"
                   placeholder="请选择关联病症"
                   filterable
                   remote
                   clearable
                   reserve-keyword
                   :remote-method="(query) => {remoteMethod2(query, 'disease')}"
                   :loading="loading3"
                   class="w-200"
                   @change="val=>handleSelect2(val, 'disease')">
          <el-option v-for="item in diseaseFilterList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>

        <el-button type="primary"
                   @click="handleAddSelectVal(disease, 'disease')">新 增</el-button>
      </el-form-item>
      <el-form-item label="已关联病症：">
        <el-table :data="tabConTitle"
                  style="width: 100%"
                  border>
          <el-table-column prop="id"
                           label="病症ID">
          </el-table-column>
          <el-table-column prop="name"
                           label="病症名称">
          </el-table-column>
          <el-table-column prop="option"
                           label="操作"
                           width="150">
            <template slot-scope="scope">
              <el-button type="danger"
                         @click="delTabConData(tabConTitle, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <template v-if="tabConData.length > 0">
        <el-tabs type="border-card"
                 @tab-click="handleClick"
                 style="width:100%"
                 v-model="tabName">
          <el-tab-pane :label="item.name"
                       v-for="item in tabConTitle"
                       :key="item.id"
                       :name="item.name">
            <el-form-item label="推荐医院检查项目："
                          prop="recommendableProjects"
                          label-width="150px">
              <el-input v-model="formModel.diseaseRecommendInfoList[tabIndex].recommendableProjects"
                        placeholder="请输入推荐医院检查项目"
                        class="w-500"
                        :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="推荐健康风险筛查项目："
                          prop="riskIds"
                          label-width="180px">
              <el-select v-model="riskIds"
                         placeholder="请选择健康风险筛查项目"
                         filterable
                         remote
                         reserve-keyword
                         clearable
                         :remote-method="(query) => {remoteMethod2(query, 'risk')}"
                         :loading="loading4"
                         class="w-200"
                         @change="val=>handleSelect2(val, 'risk')">
                <el-option v-for="item in riskFilterList"
                           :key="item.healthCheckPackageId"
                           :label="item.name"
                           :value="item.healthCheckPackageId">
                </el-option>
              </el-select>

              <el-button type="primary"
                         @click="handleAddSelectVal(riskIds, 'risk')">新 增</el-button>
            </el-form-item>
            <el-form-item label="已选健康筛查项目："
                          label-width="180px">
              <el-table :data="formModel.diseaseRecommendInfoList[tabIndex].themeHealthDtoList"
                        style="width: 100%"
                        border>
                <el-table-column prop="name"
                                 label="健康筛查项目">
                </el-table-column>
                <el-table-column prop="salesScript"
                                 label="销售导语">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.salesScript"
                              placeholder="请输入销售导语"
                              class="w-200"
                              :disabled="scope.row.themeId ? false : scope.row.complicationId  ? true : false"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="option"
                                 label="操作"
                                 width="120"
                                 align="center">
                  <template slot-scope="scope">
                    <el-button type="danger"
                               :disabled="scope.row.themeId ? false : scope.row.complicationId  ? true : false"
                               @click="delRow(formModel.diseaseRecommendInfoList[tabIndex].themeHealthDtoList, scope.$index, 'risk')">删 除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <!-- 推荐器械 -->
            <el-form-item label="推荐器械：">
              <el-button type="primary"
                         @click="handleAdd('equipment')">新 增</el-button>
              <el-table :data="formModel.diseaseRecommendInfoList[tabIndex].apparatusRequestDtoList"
                        style="width: 100%"
                        border
                        class="mt-20">
                <el-table-column prop="drugName"
                                 label="器械名称">
                </el-table-column>
                <el-table-column prop="logoUrl"
                                 label="图片"
                                 width="120"
                                 align="center">
                  <template slot-scope="scope">
                    <el-image style="width: 80px; height: 80px"
                              :src="scope.row.logoUrl"
                              :preview-src-list="[scope.row.logoUrl]">
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="salesScript"
                                 label="销售导语">
                </el-table-column>
                <el-table-column prop="option"
                                 label="操作"
                                 width="120"
                                 align="center">
                  <template slot-scope="scope">
                    <el-button type="danger"
                               :disabled="scope.row.themeId ? false : scope.row.complicationId  ? true : false"
                               @click="delRow(formModel.diseaseRecommendInfoList[tabIndex].apparatusRequestDtoList, scope.$index, 'equipment')">删 除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <equipment-dialog :equipmentDataObj="equipmentDataObj"
                                @childEquipmentData="childEquipmentData"
                                :equipmentDataList="formModel.diseaseRecommendInfoList[tabIndex].apparatusRequestDtoList"
                                :visible.sync="isShowEquipment"
                                v-if="isShowEquipment"></equipment-dialog>
            </el-form-item>
            <!-- 推荐商品 -->
            <el-form-item label="推荐商品：">
              <el-button type="primary"
                         @click="handleAdd('shop')">新 增</el-button>
              <el-table :data="formModel.diseaseRecommendInfoList[tabIndex].sellDrugDtoList"
                        style="width: 100%"
                        border
                        class="mt-20">
                <el-table-column prop="drugType"
                                 label="商品类别"
                                 align="center"
                                 width="120">
                  <template slot-scope="scope">
                    <el-tag type="success"
                            v-if="scope.row.drugType === 1">中药</el-tag>
                    <el-tag type="success"
                            v-if="scope.row.drugType === 2">化学药</el-tag>
                    <el-tag type="danger"
                            v-if="scope.row.drugType === 3">中成药</el-tag>
                    <el-tag type="info"
                            v-if="scope.row.drugType === 4">保健品</el-tag>
                    <el-tag type="warning"
                            v-if="scope.row.drugType === 5">器械</el-tag>
                    <el-tag type="success"
                            v-if="scope.row.drugType === 6">健康筛查</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="drugName"
                                 label="商品名称">
                </el-table-column>
                <el-table-column prop="logoUrl"
                                 label="图片"
                                 width="120"
                                 align="center">
                  <template slot-scope="scope">
                    <el-image style="width: 80px; height: 80px"
                              :src="scope.row.logoUrl"
                              :preview-src-list="[scope.row.logoUrl]">
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="standard"
                                 label="规格"
                                 width="100"
                                 align="center">
                </el-table-column>
                <el-table-column prop="drugPackage"
                                 label="包装"
                                 width="100"
                                 align="center">
                </el-table-column>
                <el-table-column prop="functionalIndications"
                                 label="功能主治">
                </el-table-column>
                <el-table-column prop="taboo"
                                 label="禁忌">
                </el-table-column>
                <el-table-column prop="adverseReaction"
                                 label="不良反应">
                </el-table-column>
                <el-table-column prop="salesScript"
                                 label="销售话术">
                </el-table-column>
                <el-table-column prop="option"
                                 label="操作"
                                 width="120"
                                 align="center">
                  <template slot-scope="scope">
                    <el-button type="danger"
                               :disabled="scope.row.themeId ? false : scope.row.complicationId  ? true : false"
                               @click="delRow(formModel.diseaseRecommendInfoList[tabIndex].sellDrugDtoList, scope.$index, 'shop')">删 除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <shop-dialog :shopDataObj="shopDataObj"
                           :fileUpload="fileUpload"
                           :shopDataList="formModel.diseaseRecommendInfoList[tabIndex].sellDrugDtoList"
                           @childShopData="childShopData"
                           :visible.sync=isShowShop
                           v-if="isShowShop">
              </shop-dialog>
            </el-form-item>
            <!-- 联合荐药 -->
            <el-form-item label="联合荐药：">
              <el-button type="primary"
                         @click="handleAdd('medicine')">新 增</el-button>
              <el-table :data="formModel.diseaseRecommendInfoList[tabIndex].recommendMedicineRequestDtoListArr"
                        style="width: 100%"
                        border
                        class="mt-20">
                <el-table-column prop="drugType"
                                 label="类别"
                                 width="120">
                  <template slot-scope="scope">
                    <el-tag type="success"
                            v-if="scope.row.drugType === 2">化学药</el-tag>
                    <el-tag type="dager"
                            v-if="scope.row.drugType === 3">中成药</el-tag>
                    <el-tag type="warning"
                            v-if="scope.row.drugType === 4">保健品</el-tag>
                    <el-tag type="info"
                            v-if="scope.row.drugType === 5">器械</el-tag>
                    <el-tag type="dager"
                            v-if="scope.row.drugType === 6">健康筛查</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="value"
                                 label="内容">
                  <template slot-scope="scope">
                    <el-tag type="success"
                            v-for="(item, index) in scope.row.value"
                            :key="index"
                            style="margin-right:5px">
                      {{item.drugName}}--{{item.factoryName}}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <table style="width: 100%"
                     border="0"
                     class="table-cell"
                     cellspacing="0"
                     cellpadding="0">
                <tr>
                  <td width="121"
                      class="first-td">
                    <el-tag type="danger">健康筛查项目</el-tag>
                  </td>
                  <td>
                    <el-tag v-for="item in formModel.diseaseRecommendInfoList[tabIndex].themeHealthDtoList"
                            :key="item.id"
                            type="danger"
                            style="margin-right:5px">
                      {{item.name}}
                    </el-tag>
                  </td>
                </tr>
                <tr>
                  <td width="121"
                      class="first-td">
                    <el-tag type="info">销售话术</el-tag>
                  </td>
                  <td>
                    {{formModel.diseaseRecommendInfoList[tabIndex].recommendSalesScript}}
                  </td>
                </tr>
              </table>
              <medicine-dialog :medicineDataObj="medicineDataObj"
                               @childMedicineData="childMedicineData"
                               :tabIndex=tabIndex
                               :visible.sync="isShowMedicine"
                               v-if="isShowMedicine"></medicine-dialog>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

      </template>

      <!-- 知识点 -->
      <el-form-item label="知识点："
                    class="mt-20">
        <el-button type="primary"
                   @click="handleAdd('knowledge')">新 增</el-button>
        <p align="center"
           style="width:100%"
           v-if="knowledgeList.length === 0">
          <el-empty :image-size="100"></el-empty>
        </p>
        <el-card class="mt-20 knowledge-box"
                 v-else>
          <el-timeline>
            <el-timeline-item class="div-list"
                              v-for="(item, index) in knowledgeList"
                              :key="index">
              <span v-html="commonFunction.highLight(item.knowledge, item.keyWord)">{{item.knowledge}}</span>
              <el-button type="danger"
                         :disabled="item.themeId ? true : false"
                         @click="removeRow(knowledgeList, index, 'knowledge')">删 除</el-button>
            </el-timeline-item>
          </el-timeline>
        </el-card>
        <knowledge-dialog :knowledgeDataObj="knowledgeDataObj"
                          @childKnowledgeData="childKnowledgeData"
                          :visible.sync="isShowKnowledge"
                          v-if="isShowKnowledge"></knowledge-dialog>
      </el-form-item>
      <!-- 活动商品卖点 -->
      <el-form-item label="活动商品卖点：">
        <el-button type="primary"
                   @click="handleAdd('goods')">新 增</el-button>
        <p align="center"
           style="width:100%"
           v-if="goodsList.length === 0">
          <el-empty :image-size="100"></el-empty>
        </p>
        <el-card class="mt-20 knowledge-box"
                 v-else>
          <el-timeline>
            <el-timeline-item class="div-list"
                              v-for="(item, index) in goodsList"
                              :key="index">
              <span v-html="commonFunction.highLight(item.knowledge, item.keyWord)">{{item.knowledge}}</span>
              <el-button type="danger"
                         :disabled="item.themeId ? true : false"
                         @click="removeRow(goodsList, index, 'goods')">删 除</el-button>
            </el-timeline-item>
          </el-timeline>
        </el-card>

        <goods-dialog :goodsDataObj="goodsDataObj"
                      @childGoodsData="childGoodsData"
                      :visible.sync="isShowGoods"
                      v-if="isShowGoods"></goods-dialog>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button type="info"
                 @click="modalClose">取 消</el-button>
      <el-button type="primary"
                 @click="submitForm">新 增</el-button>
    </p>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import equipmentDialog from './equipmentDialog'
  import shopDialog from './shopDialog'
  import medicineDialog from './medicineDialog'
  import knowledgeDialog from './knowledgeDialog'
  import goodsDialog from './goodsDialog'
  export default {
    name: 'specialItemDialog', // 特色专项主题管理弹窗
    props: {
      dataObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        title: '新 增',
        loading: false,
        loading3: false,
        loading4: false, // 推荐健康风险筛查项目默认false
        isShowEquipment: false, // 推荐器械
        isShowShop: false, // 推荐商品
        isShowMedicine: false, // 联合荐药
        isShowKnowledge: false, // 知识点
        isShowGoods: false, // 活动商品卖点
        imageUploadUrl: this.api.appUpgradeUpload.url,
        formModel: {
          type: 2,
          name: '', // 检测项名称
          complicationInfo: '', // 关联病症
          diseaseRecommendInfoList: [
            /*  {
               recommendableProjects: '', // 推荐医院检查项目
               themeHealthDtoList: [], // 已选健康筛查项目列表
               apparatusRequestDtoList: [], // 推荐器械列表
               sellDrugDtoList: [], // 推荐商品列表
               recommendMedicineRequestDtoList: [], // 联合荐药列表
               recommendSalesScript: '', // 销售话术
             } */
          ],
          themeKnowledgeRequestDtoList: [], // 知识点、活动商品卖点
        },
        formRules: {
          name: [{ required: true, message: '请输入专项主题名', trigger: 'blur' }]
        },
        recommendMedicineRequestDtoList: [],
        disease: '', // 绑定关联病症
        // 关联病症列表
        diseaseList: [],
        diseaseFilterList: [],
        // 推荐健康风险筛查项目
        riskIds: '', // 推荐健康风险筛查项目
        riskList: [],
        riskFilterList: [],
        equipmentDataObj: {}, // 推荐器械
        shopDataObj: {}, // 推荐商品
        medicineDataObj: {}, // 联合荐药
        knowledgeDataObj: {}, // 知识点
        goodsDataObj: {}, // 活动商品卖点
        typeList: [
          { drugType: 2, drugName: "化学药" },
          { drugType: 3, drugName: "中成药" },
          { drugType: 4, drugName: "保健品" },
          { drugType: 5, drugName: "器械" }
        ],
        knowledgeList: [], // 知识点
        goodsList: [], // 活动商品卖点
        tabIndex: '0',
        tabConTitle: [], // 选项卡标题
        tabConData: [], // 选项卡内容
        tabName: '',
        themeId: '',
        paramsPage: {
          pageIndex: 0,
          pageSize: 10,
        },
        apparatusRequestDtoList: [], // 推荐器械
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      // 提交
      submitForm () {
        if (this.knowledgeList.length === 0) {
          this.$message.error('请填写知识点!');
          return;
        }
        this.formModel.themeKnowledgeRequestDtoList = [...this.knowledgeList, ...this.goodsList];
        this.$refs.formRef.validate((valid) => {
          this.formModel.complicationInfo = this.tabConTitle.map(item => ({ id: item.id }));
          // return
          if (valid) {
            if (this.dataObj) { // 编辑
              this.post(this.api.promote.updateTermTheme, this.formModel, { showFullScreenLoading: true }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success('保存成功!');
                  this.modalClose();
                  this.$parent.getList();
                }
              })
            } else { // 新增
              this.post(this.api.promote.saveTermTheme, this.formModel, { showFullScreenLoading: true }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success('保存成功!');
                  this.modalClose();
                  this.$parent.getList();
                }
              })
            }

          }
        })

      },
      handleAdd (option) {
        switch (option) {
          case 'equipment':
            this.isShowEquipment = true;
            break;
          case 'shop':
            this.isShowShop = true;
            break;
          case 'medicine':
            this.isShowMedicine = true;
            let temp = this.formModel.diseaseRecommendInfoList[this.tabIndex];
            this.medicineDataObj = {
              themeId: this.formModel.id,
              recommendMedicineRequestDtoList: temp.recommendMedicineRequestDtoList,
              recommendMedicineRequestDtoListArr: temp.recommendMedicineRequestDtoListArr ? temp.recommendMedicineRequestDtoListArr : [],
              recommendSalesScript: temp.recommendSalesScript
            };
            break;
          case 'knowledge':
            this.isShowKnowledge = true;
            break;
          case 'goods':
            this.isShowGoods = true;
            break;
        }
      },
      delRow (table, index, option) {
        table.splice(index, 1);
      },
      setThemeIdFn (data) {
        if (this.dataObj) {
          data['themeId'] = this.dataObj.id;
        } else {
          data['themeId'] = null;
        }
      },
      // 推荐器械,接收子组件传递过来的数据
      childEquipmentData (data) {
        this.setThemeIdFn(data);
        this.formModel.diseaseRecommendInfoList[this.tabIndex].apparatusRequestDtoList.push(data);
      },
      // 推荐商品,接收子组件传递过来的数据
      childShopData (data) {
        this.setThemeIdFn(data);
        this.formModel.diseaseRecommendInfoList[this.tabIndex].sellDrugDtoList.push(data);
      },
      // 联合荐药,接收子组件传递过来的数据
      childMedicineData (data) {
        console.log(data, '----')
        this.setThemeIdFn(data);
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoList = data.tableData;
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoListArr = data.recommendMedicineRequestDtoListArr;
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendSalesScript = data.recommendSalesScript;
      },
      // 知识点,接收子组件传递过来的数据
      childKnowledgeData (data) {
        this.knowledgeList.push(data);
      },
      // 活动商品卖点,接收子组件传递过来的数据
      childGoodsData (data) {
        this.goodsList.push(data);
      },
      // 删除知识点、活动商品卖点
      removeRow (data, index, option) {
        data.splice(index, 1);
      },




      // ---------远程搜索关联病症---------
      remoteMethod2 (query, op) {
        if (query !== '') {
          let _this = this;
          if (op === 'disease') {
            _this.loading3 = true;
            this.post(this.api.promote.complicationList, {
              name: query,
              ...this.paramsPage
            }).then(res => {
              if (res.data.code === '200') {
                _this.loading3 = false;
                _this.diseaseList = res.data.object;
              }
            })
            setTimeout(() => {
              _this.loading3 = false;
              _this.diseaseFilterList = _this.diseaseList.filter(item => item.name.indexOf(query) > -1);
            }, 200)
          }
          if (op === 'risk') {
            _this.loading4 = true;
            this.post(this.api.promote.getRecommendPageList, {
              name: query
            }).then(res => {
              if (res.data.code === '200') {
                _this.loading4 = false;
                _this.riskList = res.data.object.map(item => ({
                  healthCheckPackageId: item.id,
                  name: item.name,
                  type: item.healthRiskTypeName,
                }));
              }
            })
            setTimeout(() => {
              _this.loading4 = false;
              _this.riskFilterList = _this.riskList.filter(item => item.name.indexOf(query) > -1);
            }, 200)
          }

        } else {
          if (op === 'disease') {
            this.diseaseFilterList = [];
          }
          if (op === 'risk') {
            this.complicationInfoFilterList = [];
          }
        }
      },

      handleSelect2 (item, op) {
        if (op === 'disease') {
          this.disease = item;
        }
        if (op === 'risk') {
          this.riskIds = item;
        }
      },
      // 删除已关联病症
      delTabConData (table, index) {
        table.splice(index, 1);
        this.tabConData.splice(index, 1);
      },
      // 切换Tab
      handleClick (tab, event) {
        this.tabIndex = tab.index;
        // 回显推荐商品列表
        this.formModel.diseaseRecommendInfoList[this.tabIndex].sellDrugDtoList =
          this.tabConData[this.tabIndex].sellDrugDtoList;
        // 回显推荐器械列表
        this.formModel.diseaseRecommendInfoList[this.tabIndex].apparatusRequestDtoList =
          this.tabConData[this.tabIndex].apparatusRequestDtoList;
        // 回显联合荐药列表

        const result = this.typeList.map(item => ({
          ...item,
          value: this.tabConData[this.tabIndex].recommendMedicineRequestDtoList.filter(sItem =>
            item.drugType === sItem.drugType)
        }));
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoListArr = result;
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoList =
          this.tabConData[this.tabIndex].recommendMedicineRequestDtoList;
        // 回显已选健康筛查项目列表
        this.formModel.diseaseRecommendInfoList[this.tabIndex].themeHealthDtoList =
          this.tabConData[this.tabIndex].themeHealthDtoList;
        // 回显推荐医院检查项目
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendableProjects =
          this.tabConData[this.tabIndex].recommendableProjects;
        // 回显销售话术
        this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendSalesScript =
          this.tabConData[this.tabIndex].recommendSalesScript;
        if (this.dataObj) {
          this.formModel.diseaseRecommendInfoList[this.tabIndex].complicationId =
            this.tabConData[this.tabIndex].complicationId;
        } else {
          this.formModel.diseaseRecommendInfoList[this.tabIndex].complicationId =
            this.tabConData[this.tabIndex].id;
        }
      },

      // 增加关联病症、推荐健康风险筛查项目
      handleAddSelectVal (selVal, op) {
        if (op === 'disease') {
          if (selVal === '') {
            this.$message.error('请选择关联病症!');
            return
          }
          if (this.tabConTitle.some(item => item.id === selVal)) {
            this.$message.error('关联病症不能重复添加!');
            this.disease = '';
            return
          }
          if (!this.dataObj) {
            this.formModel.diseaseRecommendInfoList.push({
              complicationId: '',
              recommendableProjects: '',
              recommendSalesScript: '',
              themeHealthDtoList: [],
              apparatusRequestDtoList: [],
              sellDrugDtoList: [],
              recommendMedicineRequestDtoList: []
            })
          }


          this.post(this.api.promote.getComplicationInfo, {
            id: selVal
          }).then(res => {
            if (res.data.code === '200') {
              let resData = res.data.object;
              this.tabConTitle.push({
                id: resData.id,
                name: resData.name
              });
              this.tabName = this.tabConTitle[0].name;
              // let tab = {};
              // tab['index'] = 0;
              this.disease = '';
              if (this.dataObj) {
                resData.complicationId = resData.id;
              }
              this.tabConData.push(resData);
              // // 回显联合荐药列表
              const result = this.typeList.map(item => ({
                ...item,
                value: this.tabConData[this.tabIndex].recommendMedicineRequestDtoList.filter(sItem => item.drugType === sItem.drugType)
              }))
              this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoListArr = result;
              // this.handleClick(tab, event);
            }
          })
        }
        // 已选健康筛查项目
        if (op === 'risk') {
          if (selVal === '') {
            this.$message.error('请选择推荐健康风险筛查项目!');
            return
          }
          if (this.formModel.diseaseRecommendInfoList[this.tabIndex].themeHealthDtoList.some(item => item.healthCheckPackageId === selVal)) {
            this.$message.error('推荐健康风险筛查项目不能重复添加!');
            this.riskIds = '';
            return
          }
          let temp = this.riskList.filter(item => item.healthCheckPackageId == selVal);
          if (this.dataObj) {
            temp[0]['themeId'] = this.dataObj.id;
          }
          this.formModel.diseaseRecommendInfoList[this.tabIndex].themeHealthDtoList = [...this.formModel.diseaseRecommendInfoList[this.tabIndex].themeHealthDtoList, ...temp];
          this.riskIds = '';

        }
      },

      // 详情
      getDetail () {
        this.post(this.api.promote.themeTermInfo, {
          id: this.dataObj.id
        }).then(res => {
          if (res.data.code === '200') {
            let resData = res.data.object;

            this.formModel = resData;
            this.tabConTitle = resData.complicationInfo;
            this.tabConData = resData.diseaseRecommendInfoList;
            this.tabName = resData.complicationInfo[0].name; // 回显tab选项卡第一项选中
            // return
            const result = this.typeList.map(item => ({
              ...item,
              value: resData.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoList.filter(sItem =>
                item.drugType === sItem.drugType)
            }));
            this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoListArr = result;
            this.formModel.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoList =
              resData.diseaseRecommendInfoList[this.tabIndex].recommendMedicineRequestDtoList;
            this.knowledgeList = resData.themeKnowledgeRequestDtoList.filter(item => item.type === 1);
            this.goodsList = resData.themeKnowledgeRequestDtoList.filter(item => item.type === 2);

          }
        })
      },

    },
    created () {
      if (this.dataObj) {
        this.title = '编 辑';
        this.getDetail();
      }
    },
    components: {
      'equipment-dialog': equipmentDialog,
      'shop-dialog': shopDialog,
      'medicine-dialog': medicineDialog,
      'knowledge-dialog': knowledgeDialog,
      'goods-dialog': goodsDialog,
    },
    computed: {
      ...mapGetters(['fileUpload'])
    }
  }
</script>
<style scoped lang="scss">
  .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /deep/ .el-upload {
      &.el-upload--picture-card {
        width: 98px !important;
        height: 98px !important;
        line-height: 98px !important;
      }
      &:hover {
        border-color: #409eff;
      }
    }
    /deep/ .el-upload-list--picture-card {
      .el-upload-list__item {
        width: 98px;
        height: 98px;
      }
    }
  }
  .knowledge-box {
    width: 100%;
    .el-timeline-item {
      span {
        padding-right: 10px;
        border-right: 1px solid #ebeef5;
        width: calc(100% - 75px);
      }
    }
    /deep/ .el-timeline-item__wrapper {
      top: -10px;
      padding-left: 20px;
      border-bottom: 1px solid #ebeef5;
      .el-timeline-item__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .remove {
        font-size: 20px;
        color: #f00;
        cursor: pointer;
      }
    }
  }
  .w-500 {
    width: 500px;
  }
  .table-cell {
    td {
      padding: 3px 10px;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      &.first-td {
        border-left: 1px solid #ebeef5;
      }
    }
  }
</style>